<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>mydemo</title>
    <style>
        body,
        div {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        #box {
            width: 50px;
            height: 50px;
            background: #f00;
            position: absolute;
            left: 300px;
            top: 60px;
        }
    </style>
    <script>
        window.onload = function () {
            var oBox = document.getElementById("box");
            document.onkeydown = function (ev) {
                var oEvent = ev || window.event;
                var w = document.body.offsetWidth;
                var h = document.body.offsetHeight;
                var state = 0;
                switch (oEvent.keyCode) {
                    case 37: //left
                        //向左移动
                        //left();
                        (oBox.offsetLeft == 0) ?
                        oBox.style.left = 0:
                            oBox.style.left = (oBox.offsetLeft - 10) + "px";
                        break;
                    case 38: //up 或者 ctrl + up
                        if (oEvent.ctrlKey == 1) {
                            oBox.style.width = oBox.offsetWidth + 10 + "px";
                            oBox.style.height = oBox.offsetHeight + 10 + "px";
                        } else {
                            (oBox.offsetTop == 0) ?
                            oBox.style.top = 0:
                                oBox.style.top = (oBox.offsetTop - 10) + "px";
                        }
                        break;
                    case 39: //right
                        console.log(w);
                        console.log(oBox.offsetWidth);
                        console.log(document.body.clientWidth);
                        (oBox.offsetLeft >= (w - oBox.offsetWidth)) ?
                        (oBox.style.left = w - oBox.offsetWidth) :
                        oBox.style.left = (oBox.offsetLeft + 10) + "px";
                        console.log(oBox.style.left);
                        break;
                    case 40: //down 或者 ctrl + down
                        (oEvent.ctrlKey == 1) &&
                        (oBox.style.width = (oBox.offsetWidth - 10) + "px",
                            oBox.style.height = (oBox.offsetHeight - 10) + "px");

                        (oBox.offsetTop >= (h - oBox.offsetHeight)) ?
                        (oBox.style.top = (h - oBox.offsetHeight)) :
                        oBox.style.top = (oBox.offsetTop + 29) + "px";
                        break;
                    case 49: //ctrl + 1
                        (oEvent.ctrlKey == 1) && (oBox.style.background = "#0f0");
                        return false;
                        break;
                    case 50: //ctrl + 2
                        (oEvent.ctrlKey == 1) && (oBox.style.background = "#ff0");
                        return false;
                        break;
                    case 51: //ctrl + 3
                        (oEvent.ctrlKey == 1) && (oBox.style.background = "#00f");
                        return false;
                        break;
                    default:
                        break;
                }
                // function left() {
                // 	(oBox.offsetLeft == 0) ?
                // 	oBox.style.left = 0 :
                // 	oBox.style.left = (oBox.offsetLeft - 10) + "px";
                // }

            }


        }
    </script>
</head>

<body>
    <pre>
	红色方块为键盘操作区域，您可以进行如下操作：
	
	上：↑ 下：↓ 左：← 右：→
	
	Ctrl + 1 : 背景变为绿色
	Ctrl + 2 : 背景变为黄色
	Ctrl + 3 : 背景变为蓝色
	Ctrl + ↑ : 放大
	Ctrl + ↓ : 缩小
</pre>
    <div id="box"></div>
</body>

</html>